<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { useRouter } from 'vue-router';

const router = useRouter()

const pet = ref({
    "id": '',
    'name': '',
    'nickName': '',
    'minAge': '',
    'maxAge': '',
    'pic': '',
    'gender': '',
    'size': '',
    'hairColor': '',
    'hairSize': '',
    'minWeight': '',
    'maxWeight': '',
    'origin': '',
    'capabilities': '',
    'baseInfo': '',
    'conservation': '',
})

import { petGetItemByIdService, petUpdateService } from '@/api/pet';

const id = ref()

const getItem = async ()=> {
    id.value = router.currentRoute.value.query.id;    
    let result = await petGetItemByIdService(id.value);
    pet.value = result.data;
}
getItem();

//上传图片
//导入token
import { useTokenStore } from '@/store/token.js';
const token = useTokenStore();
//上传成功的回调函数
const uploadSuccess = (res) => {
    pet.value.pic = res.data;
}

// 校验表单
const rules = {
    name: [
        { required: true, message: '请选择宠物', trigger: 'blur' }
    ],
    nickName: [
        { required: true, message: '别名不能为空', trigger: 'blur' }
    ],
    gender: [
        { required: true, message: '性别不能为空', trigger: 'change' }
    ],
    minAge: [
        { required: true, message: '最小寿命不能为空', trigger: 'blur' }
    ],
    maxAge: [
        { required: true, message: '最大寿命不能为空', trigger: 'blur' }
    ],
    pic: [
        { required: true, message: '图像不能为空', trigger: 'blur' }
    ],
    size: [
        { required: true, message: '体型不能为空', trigger: 'change' }
    ],
    minWeight: [
        { required: true, message: '最小体重不能为空', trigger: 'blur' }
    ],
    maxWeight: [
        { required: true, message: '最大体重不能为空', trigger: 'blur' }
    ],
    hairSize: [
        { required: true, message: '毛发长度不能为空', trigger: 'change' }
    ],
    hairColor: [
        { required: true, message: '毛发颜色不能为空', trigger: 'blur' }
    ],
    origin: [
        { required: true, message: '来源不能为空', trigger: 'blur' }
    ],
    capabilities: [
        { required: true, message: '职能不能为空', trigger: 'blur' }
    ],
    baseInfo: [
        { required: true, message: '简述不能为空', trigger: 'blur' }
    ],
    conservation: [
        { required: true, message: '基本喂养知识不能为空', trigger: 'blur' }
    ]
}

// 更新
import { ElMessage } from 'element-plus';
const save = async () => {
    let result = await petUpdateService(pet.value);
    ElMessage.success(result.msg ? result.msg : '更新成功')
}
</script>
<template>
    <el-form :rules="rules" :model="pet" label-width="auto" style="max-width: 100%;">
        <el-form-item>
            <el-col span="8" :offset="8">
                <el-form-item prop="pic" label="图片：" style="display: flex; align-items: center;">
                    <!-- 
                        auto-upload:是否自动上传
                        action: 服务器接口路径
                        name: 上传的文件字段名
                        headers: 设置上传的请求头
                        on-success: 上传成功的回调函数
                    -->
                    <el-upload :auto-upload="true" :show-file-list="false" action="/api/upload" name="file"
                        :headers="{ 'Author': token.token }" :on-success="uploadSuccess">
                        <img v-if="pet.pic" :src="pet.pic" style="height: 100px; width: 100px; object-fit: cover;" />
                        <el-icon v-else style="height: 100px; width: 100px; background-color:azure;">
                            <Plus />
                        </el-icon>
                    </el-upload>
                </el-form-item>
            </el-col>
            <el-col span="4" :offset="5">
                <el-button @click="save">保存</el-button>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="8">
                <el-form-item prop="name" label="名称：">
                    <el-input readonly v-model="pet.name" style="width: 200px;" />
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item prop="nickName" label="别名：">
                    <el-input v-model="pet.nickName" style="width: 200px;" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="8">
                <el-form-item prop="gender" label="性别：" style="width: 200px;">
                    <el-select v-model="pet.gender" placeholder="请选择">
                        <el-option label="男" value="Male" />
                        <el-option label="女" value="Female" />
                        <el-option label="保密" value="Unknown" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item label="寿命：">
                    <el-col :span="6">
                        <el-form-item prop="minAge">
                            <el-input v-model="pet.minAge" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1" :offset="1" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="maxAge">
                            <el-input v-model="pet.maxAge" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="8">
                <el-form-item prop="size" label="体型：" style="width: 200px;">
                    <el-select v-model="pet.size" placeholder="请选择">
                        <el-option label="超大型" value="Extra Large" />
                        <el-option label="大型" value="Large" />
                        <el-option label="中型" value="Medium" />
                        <el-option label="小型" value="Small" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item label="体重：">
                    <el-col :span="6">
                        <el-form-item prop="minWeight">
                            <el-input v-model="pet.minWeight" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="1" :offset="1" class="text-center">
                        <span class="text-gray-500">-</span>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="maxWeight">
                            <el-input v-model="pet.maxWeight" />
                        </el-form-item>
                    </el-col>
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-col :span="4">
                <el-form-item prop="hairSize" label="毛发：">
                    <el-select v-model="pet.hairSize" placeholder="请选择">
                        <el-option label="长毛" value="long" />
                        <el-option label="短毛" value="short" />
                        <el-option label="卷毛" value="curl" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="8">
                <el-form-item prop="hairColor" label="发色：">
                    <el-input v-model="pet.hairColor" style="width: 200px;" />
                </el-form-item>
            </el-col>
        </el-form-item>
        <el-form-item prop="origin" label="来源：">
            <el-input v-model="pet.origin" style="width: 700px;" />
        </el-form-item>
        <el-form-item prop="capabilities" label="职能：">
            <el-input v-model="pet.capabilities" style="width: 700px;" />
        </el-form-item>
        <el-form-item>
            <el-col :span="8">
                <el-form-item prop="baseInfo" label="简述：">
                    <el-input v-model="pet.baseInfo" style="width: 250px; height: 250px;"
                        :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
                </el-form-item>
            </el-col>
            <el-col :span="8" :offset="4">
                <el-form-item prop="conservation" label="基本喂养知识：">
                    <el-input v-model="pet.conservation" style="width: 250px; height: 250px;"
                        :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入" />
                </el-form-item>
            </el-col>
        </el-form-item>
    </el-form>
</template>
<style>
.avatar-uploader {
    :deep() {
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }

        .el-upload {
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
        }

        .el-upload:hover {
            border-color: var(--el-color-primary);
        }

        .el-icon.avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            text-align: center;
        }
    }
}
</style>